<!--
 * @Author: 清羽
 * @Date: 2022-08-23 18:56:15
 * @LastEditTime: 2022-10-05 14:31:52
 * @LastEditors: you name
 * @Description: 
-->
<!-- list 页 -->
<template>
  <div class="app-container">
    <div
      class="list"
      v-if="categoryList.length>0"
    >
      <!-- <el-tree
        :data="categoryList"
        node-key="_id"
        :props="defaultProps"
        default-expand-all
      >
      </el-tree> -->

      <el-button
        @click="addCategoryDialogVisible('父分类')"
        style="margin-bottom: 1rem;"
      >添加父分类</el-button>

      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content bg-purple">分类名称</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">设置是否主页展示</div>
        </el-col>
        <el-col :span="4">操作</el-col>
      </el-row>

      <el-tree
        :data="categoryList"
        :props="defaultProps"
        node-key="_id"
        default-expand-all
        show-checkbox
        :expand-on-click-node="false"
      >
        <el-row
          :gutter="20"
          slot-scope="{ node, data }"
        >

          <el-col :span="2">
            <span>{{ node.label }}</span>
          </el-col>

          <el-col :span="4">
            <el-switch
              v-if="data.pid!=='0'"
              v-model="data.show"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="setShow(data._id)"
            >
            </el-switch>
            <div
              v-else
              style="width:38px ; height:18px;"
            ></div>
          </el-col>

          <el-col :span="4">
            <span style="margin-right:1.5rem ;">
              <el-button
                v-if="data.pid=='0'"
                type="text"
                size="mini"
                @click="() => append(node.key)"
              >
                <i class=" el-icon-plus"></i>
                添加
              </el-button>
              <el-button
                type="text"
                size="mini"
                v-else
              >&#160; &#160; &#160;</el-button>
            </span>

            <span>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node.key)"
              >
                <i class="el-icon-delete"></i>
                删除
              </el-button>
            </span>
          </el-col>

        </el-row>
      </el-tree>
    </div>

    <el-empty
      :image-size="200"
      v-else
    >
      <el-button
        @click="addCategoryDialogVisible('父分类')"
        style="margin-bottom: 1rem;"
      >添加父分类</el-button>
    </el-empty>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="'添加'+(dialogVisibleTitle)"
      @closed="empty"
    >
      <el-input
        v-model="categoryName"
        :placeholder="'请输入'+(dialogVisibleTitle)+'名称'"
      ></el-input>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addCategory"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分类添加弹窗 end -->
  </div>
</template>

<script>
import { getBusinessCateList, addBusinessCategory, delCategory, setShowCategory } from '@/api/business/category'
export default {
  name: "list",
  data () {
    return {
      categoryList: [],
      defaultProps: {
        children: 'categoryChild',
        label: 'cate_name'
      },
      selectId: 0,
      categoryName: '',
      dialogVisibleTitle: '',
      dialogVisible: false
    }
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getData()
  },
  // 函数
  methods: {
    getData () {
      getBusinessCateList().then(response => {
        this.categoryList = response.data.data
        console.log("getBusinessCateList => this.categoryList", this.categoryList)
      })
    },

    // 添加分类弹窗
    addCategoryDialogVisible (value) {
      this.dialogVisibleTitle = value
      this.dialogVisible = true
    },

    // 添加子分类
    append (pid) {
      this.selectId = pid
      this.addCategoryDialogVisible('子分类')
    },

    // 删除分类
    remove (id) {
      delCategory({ categoryId: id }).then(response => {
        this.$message({
          message: response.data.msg,
          type: "success"

        })
        this.getData()
      })
    },

    // 添加分类
    addCategory () {
      let data = {
        pid: this.selectId,
        cateName: this.categoryName,
        sort: 0
      }
      addBusinessCategory(data).then(response => {
        this.$message({
          message: response.data.msg,
          type: "success"

        })
        this.dialogVisible = false
      })
    },

    async setShow (categoryId) {
      await setShowCategory({ categoryId }).then(response => {
        console.log("awaitsetShowCategory => response", response)
        this.$message({
          type: 'success',
          message: response.data.msg
        })
      }).finally(_ => {
        this.getData()
      })
    },

    // 弹窗弹窗
    empty () {
      console.log('清空');
      this.dialogVisibleTitle = ''
      this.categoryName = ''
      this.selectId = 0
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.list {
  ::v-deep .el-checkbox {
    // display: none;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .el-row {
    width: 100%;
  }
}
</style>